<!--
 * @Author: lyx 2858535420@qq.com
 * @Date: 2022-10-10 22:31:07
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-03-31 22:34:05
 * @FilePath: /antd-vue2-template/src/components/Charts/TransferBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart height="254" :data="data" :scale="scale" :forceFit="true" :padding="['auto', 'auto', '40', '50']">
      <v-tooltip />
      <v-axis />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
import { manager } from '@/api/manage';

const tooltip = [
  'x*y',
  (x, y) => ({
    name: x,
    value: y
  })
];
const scale = [
  {
    dataKey: 'x',
    title: '日期(天)',
    alias: '日期(天)',
    min: 2
  },
  {
    dataKey: 'y',
    title: '流量(Gb)',
    alias: '流量(Gb)',
    min: 1
  }
];

export default {
  name: 'Bar',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: [],
      scale,
      tooltip
    };
  },
  created() {
    this.getMonthBar();
  },
  methods: {
    getMonthBar() {
      manager.get('/analysis/month-bar').then((res) => {
        this.data = res.result;
      });
    }
  }
};
</script>
